<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .outer {
            width: 400px;
            margin: 100px auto;
            text-align: center;
        }

        table {
            width: 400px;
            border-collapse: collapse;
            margin-bottom: 20px;
        }

        td,
        th {
            border: 1px black solid;
            padding: 10px 0;
        }

        form div {
            margin: 10px 0;
        }
    </style>
    <script>
        window.onload = function(){
            //删除员工信息
            function delemp(){
                    const tr = this.parentNode.parentNode

                    const delname = tr.getElementsByTagName("td")[0].textContent
                    
                    let flag = confirm(`确认要删除${delname}的信息吗？`)

                    if(flag){
                        tr.remove()
                    }
                    
                }

            const del = document.getElementsByTagName("a")

            for(let i = 0; i < del.length; i++){
                del[i].onclick = delemp
            }



            //添加员工信息
            const btn = document.getElementById("btn")
            const tbody = document.querySelector("tbody")

            btn.onclick = function(){
                const name = document.getElementById("name").value 
                const email = document.getElementById("email").value
                const salary = document.getElementById("salary").value


                //这种方法有被xss攻击的危险
            //    tbody.insertAdjacentHTML(
            //     "beforeend",

            //    `
            //    <tr>
            //         <td>${name}</td>
            //         <td>${email}</td>
            //         <td>${salary}</td>
            //         <td><a href="javascript:;">删除</a></td>
            //     </tr>
            //    `
            //    )


            const tr = document.createElement("tr")

            const tdname = document.createElement("td")
            const tdemail = document.createElement("td")
            const tdsalary = document.createElement("td")

            tdname.textContent = name
            tdemail.textContent = email
            tdsalary.textContent = salary



            tr.appendChild(tdname)
            tr.appendChild(tdemail)
            tr.appendChild(tdsalary)
            tr.insertAdjacentHTML(
                "beforeend",
                `<td><a href="javascript:;">删除</a></td>`
            )

            tbody.appendChild(tr)

               del[del.length - 1].onclick = delemp
            }
        }
    </script>
</head>

<body>
    <div class="outer">
        <table>
            <tbody>
                <tr>
                    <th>名称</th>
                    <th>邮件</th>
                    <th>薪资</th>
                    <th>操作</th>

                </tr>
                <tr>
                    <td>孙悟空</td>
                    <td>swk@hgs.com</td>
                    <td>10000</td>
                    <td><a href="javascript:;">删除</a></td>
                </tr>
                <tr>
                    <td>猪八戒</td>
                    <td>zbj@glz.com</td>
                    <td>8000</td>
                    <td><a href="javascript:;">删除</a></td>
                </tr>
                <tr>
                    <td>沙和尚</td>
                    <td>shs@lsh.com</td>
                    <td>6000</td>
                    <td><a href="javascript:;">删除</a></td>
                </tr>
            </tbody>
        </table>


        <form action="#">
            <div>
                <label for="name">姓名</label>
                <input type="text" id="name" value=""/>
            </div>

            <div>
                <label for="email">邮件</label>
                <input type="email" id="email" value=""/>
            </div>

            <div>
                <label for="salary">薪资</label>
                <input type="number" id="salary" value=""/>
            </div>
            <button id="btn" type="button">添加</button>

        </form>
    </div>
</body>

</html>